<#include "../common/header.htm">
    <div class="content-wrapper" style="height:100%;padding:0 10px;">
        <section class="content" style="height:100%;">
                <div id="inAccount" style="background:#fff;height:100%;display:flex;flex-direction: column;"  >
                    <div class="stream_search" style="height:40px;" >
                        <el-form id="listForm" :inline="true"  :model="form" class="demo-form-inline">
                            <el-form-item class="form_z" label="日期范围">
                                <el-date-picker
                                        v-model="form.beginTime"
                                        name="beginTime"
                                        type="date"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item class="el-form-item refsh" label="至">
                                <el-date-picker
                                        v-model="form.endTime"
                                        name="endTime"
                                        type="date"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="金额">
                                <el-input v-model="form.minMoney" name="minmoney" placeholder=""></el-input>
                            </el-form-item>
                            <el-form-item class="refshj" label="至">
                                <el-input v-model="form.maxMoney" name="maxmoney" placeholder=""></el-input>
                            </el-form-item>
                            <div class="zcdcon">
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit">分析</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button  @click="clear()">重置</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" class="daobtn" @click="exportExcel" >导出</el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                    <div class="svzjFontCon">
                        <span class="zcline"></span><span class="zcfont">转出</span><span class="hlline"></span><span class="hlfont">回流</span>
                        <span class="loadimgbtn" title="保存为图片"></span>
                    </div>
                    <div class="stream_body svzjCon" style="flex:1;overflow: auto;">
                        <canvas id="canvas1" style="padding-right: 20px;"></canvas>
                    </div>
                </div>
        </section>
    </div>
    <script>

        $(function () {
            _checkedCallback();

        })
        $('.el-tabs__content').height=($(window).height())-50;

        //计算头部坐标
        var _calcH=function(sp,ep,context){
            var size=6;
            if(sp.y>ep.y){
                return {
                    h1:{x:ep.x-size,y:ep.y+size},
                    h2:{x:ep.x+size,y:ep.y+size}
                };
            }else{
                return {
                    h1:{x:ep.x-size,y:ep.y-size},
                    h2:{x:ep.x+size,y:ep.y-size}
                };
            }
        };
        function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
            var context = canvas.getContext("2d");
            var lineWidth = 0;
            var canvasWidth = 80;
            var lastSubStrIndex= 0;
            context.fillStyle = "#333";
            for(let i=0;i<str.length;i++){
                lineWidth+=context.measureText(str[i]).width;
                if(lineWidth>canvasWidth-initX){//减去initX,防止边界出现的问题
                    context.fillText(str.substring(lastSubStrIndex,i),initX,initY);
                    initY+=lineHeight;
                    lineWidth=0;
                    lastSubStrIndex=i;
                }
                if(i==str.length-1){
                    context.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
                }
            }
        }
        let monthAnalysis=new Vue({
            el:"#inAccount",
            data:{
                showType:0,
                tableData: [],
                currentPage:1,
                activeName: 'first',
                form: {
                    rivalName: '',
                    beginTime: '',
                    endTime: '',
                    minMoney:"",
                    maxMoney:"",
                },
                pageSize:10,
                total:"",
                timeline_data:[],
                dist:[],
                end:false,
                isActive:[],
                miaoBaoXieList:[],
                timelineActive:[],
                yearMonth:""
            },
            filters: {

            },
            methods: {
                onSubmit() {
                    _checkedCallback();


                },
                clear(){
                    this.form={
                        rivalName: '',
                        beginTime: '',
                        endTime: '',
                        minMoney:"",
                        maxMoney:"",
                    }
                },
                exportExcel(){
                    var minMoney = "";var maxMoney = "";
                    if (this.form.minMoney) minMoney = this.form.minMoney;
                    if (this.form.maxMoney) maxMoney = this.form.maxMoney;

                    var xhr = new XMLHttpRequest();
                    var url="${ctx}bill/stream/moneyFlowExcel";
                    xhr.open('POST', url, true);
                    xhr.responseType = "blob";  // 返回类型blob
                    // 定义请求完成的处理函数
                    xhr.onload = function () {
                        // 请求完成
                        if (this.status === 200) {
                            var content = this.response;
                            var aTag = document.createElement('a');
                            var blob = new Blob([content]);
                            var headerName = xhr.getResponseHeader("Content-disposition");
                            var fileName = decodeURIComponent(headerName).substring(21);
                            aTag.download = fileName;
                            aTag.href = URL.createObjectURL(blob);
                            aTag.click();
                            URL.revokeObjectURL(blob);
                        }
                    };
                    // 发送ajax请求
                    var formdata=new FormData();
                    formdata.append("minMoney",minMoney);
                    formdata.append("maxMoney",maxMoney);
                    formdata.append("checkedAccount",parent.parent._checkedAccount);
                    formdata.append("caseId",parent.caseId);
                    formdata.append("endTime",getMyDate(this.form.endTime));
                    formdata.append("beginTime",getMyDate(this.form.beginTime));
                    xhr.send(formdata);
                },
            }
        });

        //删除数组指定索引后面的指
        function delArr(arr,index){
            return arr.splice(index+1,arr.length-index-1)
        }
        var arr=""
        function moneyFlow(checkedAccount) {
            $.ajax({
                url:'${ctx}bill/stream/moneyFlow',
                data:{"checkedAccount":checkedAccount,"caseId":parent.caseId,"beginTime":getMyDate(monthAnalysis.form.beginTime),"endTime":getMyDate(monthAnalysis.form.endTime),"minMoney":monthAnalysis.form.minMoney,"maxMoney":monthAnalysis.form.maxMoney},
                dataType:'json',
                type:'post',
                async:false,
                traditional: true,
                success:function (obj) {
                    //第一步，模拟假数据
                    var userArr=obj.userArr;
                    var flowArr1=obj.flowArr;
                    var flowArr= new Array();
                    if(userArr){
                        for(var i=0;i<flowArr1.length;i++) {
                            if(flowArr1[i].from!=flowArr1[i].to
                                && userArr.indexOf(flowArr1[i].from)>=0
                                && userArr.indexOf(flowArr1[i].to)>=0){
                                flowArr.push(flowArr1[i]);
                            }
                        }
                    }
                    var userObject={};
                    //第二步，按照假数据，确定canvas大小
                    //2.1 宽度根据内容决定，如果内容宽度超出页面宽度，就设置为页面宽度，如果内容宽度小于页面宽度，就设置为页面宽度
                    canvasWidth=80*flowArr.length+115;
                    svzjRightWidth=($(window).width())-20;
                    if(canvasWidth<svzjRightWidth){
                        canvasWidth=$('.stream_body').width()-20;
                    }

                    //2.2 高度根据内容决定，如果内容高度超出页面高度，就设置为页面高度，如果内容高度小于页面高度，就设置为页面高度
                    canvasHeight=70*userArr.length+68;
                    var canvas1=document.getElementById("canvas1")
                    var context = canvas1.getContext("2d");
                    canvas1.width=canvasWidth;
                    canvas1.height=canvasHeight;
                    $('.stream_body').height(canvasHeight);


                    //第三步，绘制人物、姓名、生命线
                    for(var i=0;i<userArr.length;i++){
                        context.beginPath();
                        userObject[userArr[i]]={};
                        //创建新的图片对象
                        userObject[userArr[i]].img = new Image();
                        //指定图片的URL
                        userObject[userArr[i]].img.src = "${ctx}imgs/svzjimg.png";
                        //浏览器加载图片完毕后再绘制图片
                        userObject[userArr[i]].img.index=i;
                        userObject[userArr[i]].img.onload = function(){
                            context.drawImage(this, 44, 62+70*this.index, 12, 15);
                        };
                        canvasTextAutoLine(userArr[i],canvas1,10,90+70*i,12);

                        userObject[userArr[i]].height =72+70*i;
                        context.lineWidth = 1;
                        context.strokeStyle = "#dedede";
                        context.moveTo(85,userObject[userArr[i]].height);
                        context.lineTo(canvasWidth,userObject[userArr[i]].height);
                        context.closePath();
                        context.stroke();
                        context.beginPath();
                        context.fillStyle = "#dedede";
                        context.arc(85,userObject[userArr[i]].height,3,0,Math.PI*2,true); //Math.PI*2是JS计算方法，是圆
                        context.fill();
                        context.closePath();
                        context.stroke();
                    }

                    //第三步，绘制交易连线、金额、日期
                    //3.1连线的起始位置
                    for(var i=0;i<flowArr.length;i++){
                        context.beginPath();
                        context.moveTo(145+80*i,userObject[flowArr[i].from].height);
                        context.lineTo(145+80*i,userObject[flowArr[i].to].height);
                        //绘制文本
                        //设置字体样式
                        context.font = "12px";
                        //设置字体填充颜色
                        context.fillStyle = "#333";
                        //从坐标点(50,50)开始绘制文字
                        if(userObject[flowArr[i].from].height-userObject[flowArr[i].to].height<0){
                            context.fillText(flowArr[i].time,115+80*i, userObject[flowArr[i].from].height-5);
                        }
                        if(userObject[flowArr[i].from].height-userObject[flowArr[i].to].height>0){
                            context.fillText(flowArr[i].time,115+80*i, userObject[flowArr[i].from].height+15);
                        }
                        if(userObject[flowArr[i].from].height-userObject[flowArr[i].to].height<0){
                            context.fillText(flowArr[i].money,135+80*i, userObject[flowArr[i].to].height+12);
                        }
                        if(userObject[flowArr[i].from].height-userObject[flowArr[i].to].height>0){
                            context.fillText(flowArr[i].money,135+80*i, userObject[flowArr[i].to].height-5);
                        }

                        context.lineWidth = 1;
                        if(userObject[flowArr[i].from].height>userObject[flowArr[i].to].height){
                            context.strokeStyle = "#ff8547";
                        }else{
                            context.strokeStyle = "#178cf7";
                        }

                        //画箭头头部
                        var sp={x:145+80*i,y:userObject[flowArr[i].from].height};
                        var ep={x:145+80*i,y:userObject[flowArr[i].to].height};
                        var h=_calcH(sp,ep,context);
                        context.moveTo(ep.x,ep.y);
                        context.lineTo(h.h1.x,h.h1.y);
                        context.moveTo(ep.x,ep.y);
                        context.lineTo(h.h2.x,h.h2.y);
                        context.closePath();
                        context.stroke();
                    }

                }
            })
        }
        function _checkedCallback() {
            var checkedAccount = parent.parent._checkedAccount;
            if(checkedAccount&&checkedAccount.length>=2){
                var str ='';
                str = checkedAccount[0].split("_")[0];
                var flag=false;
                for (var i=1;i<checkedAccount.length;i++){
                    if (checkedAccount[i].split("_")[0]==str){

                    }else {
                    	flag = true;
                        break;
                    }
                }
                if (flag){
                    moneyFlow(checkedAccount);
                } else {
                	toastr.success("请选择两个主体以上");
                }
            }else{
                toastr.success("请选择两个主体以上");
            }
        }

        $(".loadimgbtn").click(function(){
            downloadCanvasIamge('canvas', '相互资金流向分析')
        })

        // 下载Canvas元素的图片
        function downloadCanvasIamge(canvas, name) {
            // 通过选择器获取canvas元素
            var canvas = document.querySelector(canvas)
            canvas.style.backgroundColor='#fff';
            // 使用toDataURL方法将图像转换被base64编码的URL字符串
            var url = canvasToImage('#fff',canvas);
            // 生成一个a元素
            var a = document.createElement('a')
            // 创建一个单击事件
            var event = new MouseEvent('click')

            // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
            a.download = name || '下载图片名称'
            // 将生成的URL设置为a.href属性

            a.href = url

            // 触发a的单击事件
            a.dispatchEvent(event)
        }
        function canvasToImage(backgroundColor,canvas) {
            //cache height and width
            var w = canvas.width;
            var h = canvas.height;

            var data;
            var canvas1=document.getElementById("canvas1")
            var context = canvas1.getContext("2d");
            if(backgroundColor)
            {
                //get the current ImageData for the canvas.
                data = context.getImageData(0, 0, w, h);

                //store the current globalCompositeOperation
                var compositeOperation = context.globalCompositeOperation;

                //set to draw behind current content
                context.globalCompositeOperation = "destination-over";

                //set background color
                context.fillStyle = backgroundColor;

                //draw background / rect on entire canvas
                context.fillRect(0,0,w,h);
            }

            //get the image data from the canvas
            var imageData = canvas.toDataURL("image/png");

            if(backgroundColor)
            {
                //clear the canvas
                context.clearRect (0,0,w,h);

                //restore it with original / cached ImageData
                context.putImageData(data, 0,0);

                //reset the globalCompositeOperation to what it was
                context.globalCompositeOperation = compositeOperation;
            }

            //return the Base64 encoded data url string
            return imageData;
        }

    </script>

    <style>
        .el-tabs__item.is-active {
            color: #287CDF;
        }
        .el-tabs__active-bar{
            background-color: #287CDF;
            height: 2px;
        }
        .el-tabs__header{
            margin: 0px 0 7px!important;
            width: 100%;
            z-index: 2;
            background: #fff;
            position: fixed;
        }
        .svzjRight {
            margin-top: -30px;
        }
        .stream_body::-webkit-scrollbar {/*滚动条整体样式*/
            height: 6px;
        }
        .loadimgbtn{
           background: url(${ctx}/imgs/login-imgs/loadimg.png);
            display: inline-block;
            width: 14px;
            height: 16px;
            position: absolute;
            right: 35px;
            cursor: pointer;
        }
        .loadimgbtn:hover{
            background: url(${ctx}/imgs/login-imgs/loadimgh.png);
            display: inline-block;
            width: 14px;
            height: 16px;
            position: absolute;
            right: 35px;
        }
        .svzjRight{
            overflow-y: auto;
        }
        .refshj .el-form-item__label {
            margin-left: -16px;
            margin-right: -8px;
        }
        .svzjFontCon {
            text-align: center;
            padding-top: 60px;
        }
        span.zcline {
            display: inline-block;
            width: 20px;
            height: 2px;
            background-color: #3b9ef3;
            border-radius: 1px;
            vertical-align: super;
            margin-right: 5px;
        }
        span.hlline{
            display: inline-block;
            width: 20px;
            height: 2px;
            background-color: #e6965c;
            border-radius: 1px;
            vertical-align: super;
            margin-right: 5px;
        }
        span.zcfont {
            margin-right: 10px;
        }
        .svzjLeft{
            float: left;
        }
        .svzjRen {
            text-align: center;
            padding-top: 34px;
        }
        .svzjimg {
            width: 12px;
            height: 15px;
            background: url("../../../imgs/svzjimg.png") no-repeat;
            margin-left: 47px;
        }
        .svzjCircle {
            width: 8px;
            height: 8px;
            background-color: #eef1f9;
            margin-top: 69px;
            border-radius: 50%;
        }
        .el-table__header,
        .el-table__body{
            width: 100%!important;
        }
        .account_treeview_buttonarea{
            margin-top: 40px;
        }
        .el-form-item.form_z {
            margin-right: 11px !important;
        }
        .zcdcon {
            display: inline-block;
        }
        .robot-table {
            padding: 0 10px;
        }
        .el-pagination {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .stream_search {
            position: fixed;
            background: #fff;
            width: 100%;
            padding-top: 10px;
        }
        .el-form-item__label{
            color: #6f7689;
            font-weight: 400;
            font-size: 13px;
        }
        .el-form--inline .el-form-item{
            margin-right: 18px;
        }
        .casemanage-switch .casemanage-zhexiantu.active {
            background-color: #4595ec;
        }
        .casemanage-switch .casemanage-zhexiantu {
            float: left;
            width: 50px;
            height: 35px;
            display: block;
            cursor: pointer;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            line-height: 35px;
            text-align: center;
        }
        #font_zhexian{
            color: #C1C2C3;
            font-size: 18px;
        }
        #font_zhexian.active{
            color: #F4F9FE;
        }
        .el-input__inner{
            border-color: #D2D6DE;
            height: 34px;
            width: 179px;
            font-size: 12px;
            border-color: #e4e4e4;
        }
        .el-input__inner:hover{
            border-color:#4695ed;
        }
        .el-input__inner:focus{
            border-color:#4695ed;
        }
        .el-dialog--small{
            width: 88%;
        }
        .el-button--primary{
            background-color:#4695ed;
            border-color:#4695ed;
            width: 70px;
        }
        .el-button--primary:focus, .el-button--primary:hover{
            background: #61a8f5;
            border-color: #61a8f5;
        }
        button.el-button.el-button--default.reset_button {
            background-color: #f4f4f4;
            color: #444;
            border-color: #ddd;
        }
        .button.el-button.el-button--default.reset_button:focus, button.el-button.el-button--default.reset_button:hover{
            border-color: #adadad;
            background-color: #e7e7e7;
        }
        .el-button{
            width: 70px;
        }
        .el-breadcrumb{
            margin-top: 15px;
            margin-bottom: 15px;
            font-size: 17px;
        }



        /*--------------------------------时间轴--------------------------------*/
        .timeline-account {
            width: 158px;
            white-space: pre-wrap;
            word-break: break-all;
            word-wrap: break-word;
        }
        .timeline-body{
            width: 90%;
            overflow: hidden;
        }
        .timeline-content{
            position: relative;
            overflow: hidden;
            margin-bottom: -140px;
            margin-right: 80px;
        }
        .timeline-ul{
            width:auto;
            display: block;
            height:120px;
            white-space: nowrap;
        }
        .timeline-ul li{
            list-style: none;
            width: 70px;
            height:200px;
            margin-left: -5px;
            display: inline-block;
            position: relative;
            background: url('/imgs/timeline.png') repeat-x center;
            background-size: 3px;
            white-space: nowrap;
        }
        .timeline-month span{
            position: absolute;
            left: 20px;
            top: 93px;
        }
        .timeline-month span.current{
            color:green;
        }
        .timeline-month span:before{
            content: " ";
            display: block;
            height: 13px;
            width: 13px;
            background: url("${ctx}/timelineIcons/timeline-pointMonth.png") no-repeat;
            background-size: 100%;
        }
        .timeline-day{
            cursor: pointer;
        }
        .timeline-day span{
            position: absolute;
            left: -17px;
            transform: rotate(302deg);
            top: -5px;
            width: 200px;
        }
        .timeline-day span:hover{
            color:#42CD12;
        }
        .timeline-day span:before{
            content: " ";
            display: block;
            height: 10px;
            width: 10px;
            background: url(/imgs/timeline-point.png) no-repeat;
            background-size: 100%;
            position: absolute;
            left: -16px;
            top: 7px;
        }
        .timeline-monthText{
            margin-left: -23px;
        }
        .timeline-day.current span{
            color:#42CD12;
        }
        .timeline-day.current span:before{
            background: url(/imgs/timeline-point-small.png) no-repeat;
        }
        .timeline-all{
            float: left;
            margin-top: 75px;
            margin-right: 2%;
            margin-left: 5%;
        }
        .timeline-arrow-left,
        .timeline-arrow-right{
            width: 45px;
            height: 45px;
            text-align: center;
            line-height: 45px;
            cursor: pointer;
        }
        .timeline-arrow-left{
            float: left;
            margin-top: 75px;
            background: url("${ctx}/timelineIcons/left-arrow.png");
            
        }
        .timeline-arrow-right{
            float: right;
            margin-top: 76px;
            background: url("${ctx}/timelineIcons/right-arrow.png");
        }
        .timeline-arrowLeft{
            font-size: 32px;
            color: #ccc;
        }

        .timeline-active{
            background: url('/imgs/timeline-c.png') repeat-x center;
        }
        .timelineActive{
            background: url('/imgs/timeline-c.png') repeat-x center !important;
        }
        .timelinegray{
            background: url('timelineIcons/timeline-c.png') repeat-x center !important;
        }
        .timelinegray-sp{
            color: #D7D4D4;
        }
        .timeline-day .timelinegray span:before{
            background: url("timelineIcons/timeline-samllc.png") no-repeat;
        }
    </style>
